<template>
	<view class="edit-password">
		<!-- 返回首页 -->
		<uni-bankhome />
		<view class="box-tips">
			<h2 class="title" v-if="type=='forget'">设置新密码</h2>
			<h2 class="title" v-if="type=='setup'">设置密码</h2>
			<h2 class="title" v-if="type=='edit'">修改密码</h2>
		</view>
		<u-form class="form">
			<u-form-item label-width="120" label="旧密码" v-if="type!=='forget'&&type!=='setup'">
				<div v-if="password" class="password" @click="popup('password')">
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
				</div>
				<div v-else class="no-data" @click="popup('password')">请输入您的旧密码</div>
			</u-form-item>
			<u-form-item label-width="120" :label="type=='setup'?'密码':'新密码'">
				<div v-if="newPassword" class="password" @click="popup('newPassword')">
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
				</div>
				<div v-else class="no-data" @click="popup('newPassword')">请输入您的新密码</div>
			</u-form-item>
			<u-form-item label-width="120" label="确认密码">
				<div v-if="confirmPassword" class="password" @click="popup('confirmPassword')">
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
					<span class="text"></span>
				</div>
				<div v-else class="no-data" @click="popup('confirmPassword')">确认您的新密码</div>
			</u-form-item>
			<view class="submit" v-if="type=='forget'||type=='setup'" @click="editPassword">确定密码</view>
			<view class="submit" v-if="type=='edit'" @click="editPassword">修改密码</view>
		</u-form>
		<pay-password @passwordFinish="passwordFinish" type="password" ref="payPassword"></pay-password>
	</view>
</template>

<script>
	import {
		md5
	} from "@/utils/md5.js" // md5
	import {
		EditPayPassword
	} from "@/api/members.js"
	import storage from "@/utils/storage.js"
	import payPassword from "@/components/pay-password/pay-password.vue"
	export default {
		components: {
			payPassword
		},
		data() {
			return {
				type: "",
				newPassword: "", //新密码
				password: "", //密码
				confirmPassword: "", // 确认密码
			};
		},
		onLoad(option) {
			this.type = option.type
		},
		methods: {
			editPassword() {
				if (this.type == 'edit') {
					if (this.valitOld() == false) return false;
				}
				if (this.valitNew() == false) return false;
				EditPayPassword({
					password: this.password,
					newPassword: this.newPassword
				}).then((res) => {
					if (res.data.success) {
						storage.setUserInfo(res.data.result)
						uni.showToast({
							title: "密码设置成功!",
							duration: 2000,
							icon: "none",
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 500);
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: "none",
						});
					}

				})
			},
			valitOld() {
				if (this.password.length == 0) {
					uni.showToast({
						title: "请输入旧密码",
						icon: "none"
					})
					return false
				}
				return true
			},
			valitNew() {
				if (this.newPassword.length == 0) {
					uni.showToast({
						title: "请输入新密码",
						icon: "none"
					})
					return false
				}
				if (this.confirmPassword.length == 0) {
					uni.showToast({
						title: "请确认新密码",
						icon: "none"
					})
					return false
				}
				if (this.newPassword !== this.confirmPassword) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: "none"
					})
					return false
				}
				return true
			},
			popup(type) {
				this.active = type
				if (this.active === 'newPassword') {
					this.newPassword = ''
				}
				if (this.active === 'confirmPassword') {
					this.confirmPassword = ''
				}
				if (this.active === 'password') {
					this.password = ''
				}
				this.$refs.payPassword.showPopup()
			},
			passwordFinish(word) {
				if (this.active === 'newPassword') {
					this.newPassword = word
				}
				if (this.active === 'confirmPassword') {
					this.confirmPassword = word
				}
				if (this.active === 'password') {
					this.password = word
				}
				console.log(this)
			},
		}
	};
</script>
<style lang="scss" scoped>
	@import url("../../../passport/login.scss");

	.edit-password {
		padding: 32rpx 64upx;

		.box-tips {
			margin: 0 72rpx;

			.title {
				height: 280rpx;
				line-height: 280rpx;
				text-align: center;
				font-size: 40rpx;
			}
		}

		.no-data {
			padding: 0 24upx;
			color: #999999;
		}

		.password {
			padding: 0 24upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.text {
				margin: 4upx;
				width: 16upx;
				height: 16upx;
				background-color: #222222;
				border-radius: 16upx;
			}
		}

		.u-form-item {
			margin: 40rpx 0;
		}

		.sendCode {
			/deep/ .u-form-item--right__content__slot {
				display: flex;
			}
		}

		.submit {
			margin-top: 32upx;
			background: $light-color;
		}
	}
</style>
